<template>
    <el-dialog v-model="visible" title="添加学生" width="60%" align-center >
            <el-form  :model="student" label-width="80px">
        <el-form-item label="姓名">
        <el-input v-model="student.username" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="手机号">
        <el-input v-model="student.telphone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="密码">
        <el-input v-model="student.password" type="password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="性别">
            <el-radio-group v-model="student.sex">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="邮箱">
        <el-input v-model="student.email" placeholder="请输入邮箱" />
        </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible=false">返回</el-button>
        <el-button type="primary" @click="add">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import {ref,reactive,watch,onBeforeUnmount,defineEmits} from 'vue'
import userApi from '@/api/student/student.js'

const emit = defineEmits(['addVisible'])
let props=defineProps({
    visibleModel:{
        type:Boolean,
        default:false
    }
 })

 let visible=ref(props.visibleModel);
  watch(visible,(newVal) => {
      console.log(newVal);
      emit('addVisible');
    }
   )
 let student=reactive({
    username:"",
    sex:"男",
    telphone:"",
    email:"",
    role:""
   });

  const add=()=>{
     console.log(props);
     userApi.addStudent(student).then(response=>{
        if(response.data.code==20000){
          visible.value=false;
          location.reload(true);
        }
    })
   }
</script>
<style scoped>

</style>
